<template>
  <div class="home">
    <el-container class="content-wrap">
      <el-aside style="background:#132441">
        <Aside></Aside>
      </el-aside>
      <el-container>
        <el-header style="background:#1e5896">
          <Header></Header>
        </el-header>
        <el-main style="background:#f3f3f3;overflow:hidden">
          <div class="main-wrap">
            <transition
              mode="out-in"
              name="left"
            >
              <router-view></router-view>
            </transition>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import Bread from './other/breads'
  import Header from './other/Header'
  import Aside from './other/Aside'
  export default {
    name: 'home',
    components: {
      Header,
      Aside
    },
    data() {
      return {

      }

    },
    mounted: function () {
      window.onresize = function () {
        this.wrapHeight = document.getElementsByClassName('el-main')[0].clientHeight
        document.getElementsByClassName('main-wrap')[0].style.height = this.wrapHeight - 80 + 'px'
      }
      this.wrapHeight = document.getElementsByClassName('el-main')[0].clientHeight
      document.getElementsByClassName('main-wrap')[0].style.height = this.wrapHeight - 80 + 'px'
    },
  }

</script>

<style lang="scss">
  .home {
    width: 100%;
    height: 100%;

    .left-enter {
      opacity: 100%;
      margin-left: 100px
    }

    .left-enter-to {
      opacity: 100%;
      margin-left: 0;
    }

    .left-enter-active {
      transition: 0.5s;
    }

    .left-leave {
      opacity: 0;
      margin-left: 100px;
    }

    .left-leave-to {
      opacity: 0;
      margin-left: 100px;
    }

    .left-leave-active {
      transition: 0.5s;
    }

    .content-wrap {
      height: 100%;

      .nav-left-header {
        background: linear-gradient(#1a427b, #14284a);
        text-align: center;
        height: 260px;
        line-height: 200px;

        img {
          vertical-align: middle;
        }
      }

      .main-wrap {
        background: #fff;
        margin-top: 40px;
        border: 2px solid #eceef4;
        box-sizing: border-box;
        min-width: 768px;
        // overflow: scroll;
      }
    }
  }

</style>

<style lang="scss">
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  //全局面包屑
  .bread-wrap {
    $tcolor: #818691;
    position: absolute;
    top: 80px;

    .el-breadcrumb {
      .el-breadcrumb__item {
        color: $tcolor;
        line-height: 30px;

        .el-breadcrumb__inner {
          color: $tcolor;
        }

        &:nth-child(1) {
          line-height: 20px;
          font-size: 20px;
          color: $tcolor;

          i {
            font-size: 30px;
          }
        }
      }
    }
  }

</style>
